<template>
  <nav class="menu-bar">
    <ul class="menu-list">
      <li v-for="menuItem in translatedMenuItems" :key="menuItem" class="menu-item">
        <router-link :to="getMenuItemLink(menuItem)" :style="menuItemStyle">{{ menuItem }}
        </router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
  import {reactive, inject, computed} from 'vue';

  export default {
    name: 'AppMenu',
    props: {
      currentLocale: {
        type: String,
        default: 'en'
      },
    },
    setup() {
      // 注入当前语言状态
      const currentLocale = inject('locale');
      const menuItems = reactive({
        'en': ['Stock List', 'Printing Press', 'Accessories',
          'Post Press', 'New Product', 'Customization', 'Sale'],
        'zh-CN': ['库存清单快速浏览', '各品牌印刷机库存', '各品牌印刷机配件', '印后设备', '新产品展示', '按需定制', '促销专区']
      });

      // 使用当前语言状态来获取翻译后的菜单项
      const translatedMenuItems = computed(() => {
        return menuItems[currentLocale.value];
      });

      // 根据语言状态设置菜单项样式
      const menuItemStyle = computed(() => {
        return {
          padding: currentLocale.value === 'zh-CN' ? '5px 40px' : '5px 10px',
          // 其他样式...
        };
      });


      function getMenuItemLink(menuItem) {
        if (menuItem === '库存清单快速浏览' || menuItem === 'Stock List') {
          return {
            name: 'list', // 路由名称，需在路由中定义
            params: {brand: 'all'}
          };
        }
        if (menuItem === '各品牌印刷机库存' || menuItem === 'Printing Press') {
          return {
            name: 'printBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '各品牌印刷机库存'}
          };
        }
        if (menuItem === '各品牌印刷机配件' || menuItem === 'Accessories') {
          return {
            name: 'partBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '各品牌印刷机配件'}
          };
        }
        if (menuItem === '印后设备' || menuItem === 'Post Press') {
          return {
            name: 'afterBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '印后设备'}
          };
        }
        if (menuItem === '新产品展示' || menuItem === 'New Product') {
          return {
            name: 'newBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '新产品展示'}
          };
        }
        if (menuItem === '按需定制' || menuItem === 'Customization') {
          return {
            name: 'customBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '按需定制'}
          };
        }
        if (menuItem === '促销专区' || menuItem === 'Sale') {
          return {
            name: 'disCountBrandPage', // 路由名称，需在路由中定义
            params: {menuItem: '促销专区'}
          };
        }

        // 如果没有匹配的菜单项，则返回一个空对象
        return {};
      }

      return {
        translatedMenuItems,
        getMenuItemLink,
        menuItemStyle
      };
    }
  };
</script>

<style scoped>

  .menu-bar {
    background-color: #bdcbda; /* 背景色 */
    padding: 10px; /* 内边距 */
    text-align: center; /* 将菜单项水平居中 */
  }

  .menu-list {
    list-style-type: none; /* 移除列表样式 */
    margin: 0; /* 移除默认外边距 */
    padding: 0; /* 移除默认内边距 */
  }

  .menu-item {
    display: inline-block; /* 将列表项水平排列 */
    margin-right: 2rem; /* 右侧间距 */
  }

  .menu-item a {
    text-decoration: none; /* 移除链接下划线 */
    color: #333; /* 文本颜色 */
    font-weight: bold; /* 加粗字体 */
    font-size: 0.8rem; /* 字体大小 */
    padding: 1rem 2rem; /* 内边距 */
    border-radius: 5px; /* 圆角边框 */
    background-color: #ffffff; /* 背景色 */
    transition: background-color 0.3s ease; /* 添加过渡效果 */
  }

  .menu-item a:hover {
    background-color: #e0e0e0; /* 鼠标悬停时的背景色 */
  }

  /* 移动端样式 */
  @media (max-width: 768px) {
    .menu-list {
      display: none;
      max-height: 0;
      overflow: hidden;
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .menu-list {
      display: flex;
      max-height: 30rem;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
    }

    .menu-item {
      white-space: nowrap;
      flex: 0 0 calc(40% - 2rem); /* 假设有10px的间距，那么每个项目占用50%减去间距 */
      margin-bottom: 1rem; /* 为每个项目添加一些垂直间距 */
    }

  }

</style>

